<!--
 * @Author: Evan Liu
 * @Date: 2022-02-23 11:19:00
 * @LastEditTime: 2022-10-31 10:48:54
 * @LastEditors: Aaron Huang
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ias_ui\src\views\coi\commodityM\components\goodsAttributes.vue
-->
<template>
  <div>
    <headline :headline="'商品属性'" />
    <el-form ref="ruleForm" class="form" :model="goodsInfo" label-width="120px" size="mini" label-position="left">
      <el-row v-if="goodsInfo.skuChannelInfos.length" :gutter="80" style="width: 100%">
        <el-col :span="span" :xl="xl">
          <el-form-item label="UPC(不带校验)">
            <el-input v-model="goodsInfo.sku" :disabled="true" clearable placeholder="请输入UPC(不带校验)" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="UPC">
            <el-input v-model="goodsInfo.upc" :disabled="true" clearable placeholder="请输入UPC" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="渠道商品编号">
            <el-input v-model="goodsInfo.skuChannelInfos[0].channelSkuId" :disabled="true" clearable placeholder="请输入渠道商品编号" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="渠道平台类目" prop="goodsInfo" :rules="[{ required: true, validator: validCategory, trigger: 'blur' }]">
            <el-cascader
              ref="channelCategory"
              v-model="channelCategory"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId' }"
              :options="channelOptions"
              separator=">"
              :disabled="channelId === '06' || isDisabled"
              filterable
              clearable
              :collapse-tags="!isDisabled"
              style="width: 100%"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="渠道店内类目" prop="goodsInfo" :rules="[{ required: true, validator: validResourceId, trigger: 'blur' }]">
            <el-cascader
              ref="cascader"
              v-model="initResourceId"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId', multiple: true }"
              :options="categoryOptions"
              separator=">"
              :disabled="isDisabled"
              filterable
              clearable
              :collapse-tags="!isDisabled"
              style="width: 100%"
              @change="handleChange2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="渠道品牌" prop="brandName" :rules="[{ required: true, validator: validBrandId, trigger: 'blur' }]">
            <BrandName
              ref="brandName"
              v-model="goodsInfo.skuChannelInfos[0].brandName"
              :disabled="isDisabled"
              :channel-id="channelId"
              :type="'all'"
              @change="brandChange"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col v-if="goodsInfo.skuChannelInfos.length" :span="span" :xl="xl">
          <el-form-item label="渠道上下架状态">
            <el-select v-model="goodsInfo.skuChannelInfos[0].groundStatus" :disabled="isDisabled" clearable placeholder="请选择渠道上下架状态">
              <el-option
                v-for="op in groundStatus"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="span" :xl="xl">
          <el-form-item label="业务类型" prop="goodsTypeName" :rules="{ required: false, message: '请输入商品类型', trigger: 'blur' }">
            <el-input v-model="goodsInfo.goodsTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="供应商SKU ID" prop="outSkuId" :rules="{ required: false, message: '请输入供应商SKU ID', trigger: 'blur' }">
            <el-input v-model="goodsInfo.outSkuId" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="供应商可售状态" prop="saleStatusName" :rules="{ required: false, message: '请输入供应商可售状态', trigger: 'blur' }">
            <el-input v-model="goodsInfo.saleStatusName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="退货类型" prop="returnTypeName" :rules="{ required: false, message: '请输入退货类型', trigger: 'blur' }">
            <el-input v-model="goodsInfo.returnTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label=" 退货文案" prop="returnDescTypeName" :rules="{ required: false, message: '请输入退货文案', trigger: 'blur' }">
            <el-input v-model="goodsInfo.returnDescTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <el-col v-for="(item, index) in goodsInfo.skuChannelInfos[0].channelAttributeList" :key="index" :span="span" :xl="xl">
          <el-form-item
            :label="item.attrName"
            :prop="`skuChannelInfos[0].channelAttributeList[${index}].attrValue`"
            :rules="{ required: item.requiredFlag, message: `${item.attrName}不能为空`, trigger: 'blur' }"
          >
            <el-input v-if="item.inputType == 3" v-model="item.attrValue" :placeholder="`请输入${item.attrName}`" :disabled="isDisabled" />
            <el-radio-group v-else-if="item.inputType == 4" v-model="item.attrValue" :disabled="isDisabled">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
            <el-date-picker
              v-else-if="item.inputType == 5 || item.inputType == 6"
              v-model="item.attrValue"
              :disabled="isDisabled"
              :value-format="item.inputType == 5 ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
              default-time="8:00:00"
              :type="item.inputType == 5 ? 'datetime' : 'date'"
              placeholder="选择日期"
            />
            <el-select
              v-if="item.inputType == 1 || item.inputType == 2"
              v-model="item.attrValue"
              clearable
              :multiple="item.inputType == 2"
              :placeholder="`请选择${item.attrName}`"
              :disabled="isDisabled"
            >
              <el-option v-for="op in item.attrValueList" :key="op.attrValueId" :label="op.attrValueName" :value="op.attrValueId" />
            </el-select>
            <el-popover v-if="transTemplate(item.attrKey)" placement="bottom" trigger="click">
              <i slot="reference" class="el-icon-question" />
              <component :is="transTemplate(item.attrKey)" />
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import BrandName from '@/views/coi/components/BrandName.vue'
import { groundStatus } from '@/views/coi/commonJs/dictionary'
import { queryTreeList, queryChannelTreeList } from '@/api/coi/onlineTaskAPI/sku'
import { getFathersById } from '@/utils/processingData'
import { queryChannelBrandList } from '@/api/coi/mapping/brand'
import jdtohome from '@/views/coi/schedule/components/fieldPrompt/jdtohome.vue'
import jdvip1 from '@/views/coi/schedule/components/fieldPrompt/jdvip1.vue'
import jdvip2 from '@/views/coi/schedule/components/fieldPrompt/jdvip2.vue'
import jdvip3 from '@/views/coi/schedule/components/fieldPrompt/jdvip3.vue'
export default {
  components: {
    headline,
    BrandName,
    jdtohome,
    jdvip1,
    jdvip2,
    jdvip3
  },
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    channelAttributeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    fromPage: {
      type: String,
      default: 'making'
    },
    channelId: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      groundStatus,
      count: 0,
      categoryOptions: [],
      channelOptions: [],
      channelCategory: [],
      initResourceId: [],
      queryChannelBrandList
    }
  },
  computed: {
    validBrandId() {
      const fun = (rule, value, callback) => {
        if (!this.goodsInfo.skuChannelInfos[0].brandId) callback(new Error('渠道品牌不能为空'))
        else callback()
      }
      return fun
    },
    validResourceId() {
      const fun = (rule, value, callback) => {
        if (!this.initResourceId.length) callback(new Error('渠道店内类目不能为空'))
        else callback()
      }
      return fun
    },
    validCategory() {
      const fun = (rule, value, callback) => {
        if (!this.channelCategory.length) callback(new Error('渠道平台类目不能为空'))
        else callback()
      }
      return fun
    }
  },
  watch: {
    goodsInfo(newValue, oldValue) {
      this.$parent.operationCode[0] = 100
      if (!newValue.skuChannelInfos[0].brandName) this.goodsInfo.skuChannelInfos[0].brandName = ''
      this.getTreeList()
      this.getChannelTreeList()
    }
  },
  methods: {
    transTemplate(value) {
      if ((this.channelId === '07' || this.channelId === '0') && value === 'SKU_NAME_JDDJ') return 'jdtohome'
      else if ((this.channelId === '06' || this.channelId === '0') && value === 'IS_CAN_BE_RTN') return 'jdvip1'
      else if ((this.channelId === '06' || this.channelId === '0') && value === 'PACK_TYPE') return 'jdvip2'
      else if ((this.channelId === '06' || this.channelId === '0') && value === 'WARE_BIG_SMALL_MODE') return 'jdvip3'
    },
    async getTreeList() {
      const data = { channelId: this.channelId }
      const { result } = await queryTreeList(data)
      this.categoryOptions = result || []
      this.initResourceId = this.goodsInfo.skuChannelInfos[0].skuCategories.map((_) => {
        return getFathersById(_.categoryLeafId, this.categoryOptions, 'children', 'categoryId')
      })
    },
    async getChannelTreeList() {
      const data = { channelId: this.channelId }
      const { result } = await queryChannelTreeList(data)
      this.channelOptions = result || []
      this.channelCategory = getFathersById(this.goodsInfo.skuChannelInfos[0].categoryId, this.channelOptions, 'children', 'categoryId')
    },
    brandChange(val) {
      this.goodsInfo.skuChannelInfos[0].brandId = val.value
      this.goodsInfo.skuChannelInfos[0].brandName = val.label
    },
    handleChange(value) {
      if (value && value.length) {
        const nodes = this.$refs.channelCategory.getCheckedNodes()
        this.goodsInfo.skuChannelInfos[0].categoryId = nodes[0].data.categoryId
        this.goodsInfo.skuChannelInfos[0].categoryName = nodes[0].data.categoryName
      }
    },
    handleChange2(value) {
      if (value && value.length) {
        const nodes = this.$refs.cascader.getCheckedNodes()
        const list = []
        for (let i = 0; i < nodes.length; i++) {
          const node = nodes[i]
          if (!node.hasChildren) {
            list.push({
              categoryLeafId: node.value,
              categoryName: node.label
            })
          }
        }
        this.goodsInfo.skuChannelInfos[0].skuCategories = list
      } else {
        this.goodsInfo.skuChannelInfos[0].skuCategories = {}
      }
    },
    getCharCount(str, char) {
      var regex = new RegExp(char, 'g')
      var result = str.match(regex)
      var count = !result ? 0 : result.length
      return count
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    },
    shelfLifeChange(e) {
      this.goodsInfo.shelfLife = e.match(/^\d*(\.?\d{0,1})/g)[0] || null
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin: 0 10px;
  margin-top: 20px;
}
/deep/ .el-form-item {
  width: 100%;
}

/deep/ .el-select {
  width: 100% !important;
}
/deep/.el-date-editor {
  width: 100% !important;
}
.flex {
  display: flex;
  justify-items: space-between;
}
/deep/ .suffix {
  margin-right: 10px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.el-icon-question {
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}
/deep/ .el-col-xl-8 {
  padding-left: 40px;
  padding-right: 40px;
}
</style>
